<template>
    <div class="beauty-info">
        <BeautyInfoHeader :title="title" />
        <div class="beauty-banner">
            <img src="../../assets/images/banner3.jpg" alt="">
        </div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="beauty-item" v-for="(item, index) in list" :key="index">
                <img :src="item.image" alt="">
                <div class="beauty-item-desc">
                    <p>{{ item.title }}</p>
                    <span>{{ item.descs }}</span>
                </div>
            </div>
        </van-list>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import api from "../../api/index"
import BeautyInfoHeader from "../../components/PubHeaderComponent.vue"

const title = "美业快讯"

interface IList{
    id:number,
    image:any,
    title:string,
    descs:string
}

const list = ref<IList[]>([]);
const page = ref<number>(1)
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
    api.getBeauty({ page: page.value }).then(res => {
        if (res.data.status == 200) {
            page.value++
            list.value = list.value.concat(res.data.data.result)
        }
        // 加载状态结束
        loading.value = false;
        // 数据全部加载完成
        if (res.data.status == 500) {
            finished.value = true;
        }
    })
};

</script>
<style lang="less" scoped>
.beauty-banner {
    img {
        width: 100%;
    }
}

.beauty-item {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #f3f4f5;
    padding: 10px;
    box-sizing: border-box;

    img {
        width: 100px;
        height: 100px;
        border-radius: 5px;
    }

    .beauty-item-desc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;

        p {
            font-size: 15px;
            padding: 10px 0;
        }

        span {
            display: block;
            font-size: 14px;
            color: #999;
            padding: 10px 0;
        }
    }
}
</style>
